<template>
  <div class="content">
    <div class="reporting-main">
      <div class="hd">
        <steps :step="3" :revise="isEditInfos" :editTitle="editTitle"></steps>
        <notice :title="alertTitle"></notice>
      </div>
      <div v-if="selNote" class="notice-box">
        {{ selNote }}
      </div>
      <div class="bd">
        <div class="selection-grade">
          <div class="notice-title"><span>年级选择</span></div>
          <div class="selection-bd">
            <van-tag
              v-for="item in gradeList"
              :key="item.code"
              @click="selectedGrade(item.code)"
              :class="{ actived: item.code == grade }"
              >{{ item.text }}</van-tag
            >
          </div>
        </div>
        <div class="selection-form">
          <div class="list-hd">
            <h3 class="title">学籍信息</h3>
          </div>
          <div class="list-bd">
            <van-form @submit="onSubmit" input-align="right">
              <van-row v-if="isShowSchool">
                <van-field
                  v-if="lastSchoolInput"
                  v-model="ruleForm.lastSchool"
                  name="lastSchool"
                  label="原就读学校"
                  placeholder="请输入原就读学校"
                  right-icon="arrow"
                  @click-right-icon="lastSchoolInput = false"
                  :rules="[{ required: true, message: '请输入原就读学校' }]"
                />
                <van-field
                  v-else
                  v-model="lastSchool"
                  name="lastSchool"
                  label="原就读学校"
                  placeholder="请选择原就读学校"
                  is-link
                  @click="dialogTableVisible = true"
                />
                <van-action-sheet
                  v-model="dialogTableVisible"
                  :round="false"
                  :actions="schoolList"
                  @select="onSelectSchool"
                ></van-action-sheet>
                <van-field
                  class="padrn"
                  v-model="ruleForm.studentNo"
                  name="学籍号"
                  label="学籍号"
                  placeholder="请输入学籍号"
                  :rules="[
                    { required: true, message: '请输入学籍号' },
                    {
                      validator(val) {
                        return /^[G|L][0-9a-zA-Z]{18}$/.test(val);
                      },
                      message: '请输入格式正确的学籍号',
                    },
                  ]"
                />
                <p class="info">学籍号以“G”或“L”开头（字母大写, 19位）</p>
              </van-row>
              <van-field name="isBind" label="是否捆绑派位" class="fle1">
                <template #input>
                  <van-radio-group
                    v-model="ruleForm.isBind"
                    direction="horizontal"
                    @change="onSelectIsBind(ruleForm.isBind)"
                  >
                    <van-radio name="1">是</van-radio>
                    <van-radio name="0">否</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
              <van-field
                class="padrn bindId"
                label="被捆绑学生身份证号"
                v-model="ruleForm.bindIdno"
                name="bindIdno"
                placeholder="请输入身份证号"
                :disabled="ruleForm.isBind == '0'"
              >
              </van-field>
            </van-form>
          </div>
        </div>
      </div>
      <div class="from-btn-wrap" v-if="verify.res != -1">
        <div class="form-btn" v-if="!isEditInfos">
          <van-button type="info" to="signup">上一步</van-button>
          <van-button type="info" @click="onSubmit">提交报名</van-button>
        </div>
        <div class="form-edit-btn" v-else>
          <van-button type="info" @click="onSubmit">确认修改</van-button>
        </div>
      </div>
      <div class="no-edit" v-else>
        <van-icon name="warning" />{{ verify.msg }}
      </div>
    </div>
  </div>
</template>
<script>
import { Toast, Dialog } from "vant";
import Steps from "../components/Steps";
import Notice from "../components/Notice";
import { getVerify } from "../utils/api";
export default {
  name: "selectgrade",
  components: {
    Steps,
    Notice,
  },
  data() {
    return {
      studentinfo: {},
      isEditInfos: false, //是否是修改页面
      editTitle: "",
      dialogTableVisible: false, //弹框是否显示
      isSubmit: true, //是否可以提交
      gradeList: [],
      grade: 0,
      schoolList: [], //学校列表
      lastSchool: "", //选中的学校
      ruleForm: {
        lastSchool: "",
        studentNo: "",
        isBind: "0",
        bindIdno: "",
      },
      lastSchoolInput: false, //是否手动输入原就读学校
      isShowSchool: false, //是否显示原就读学校和学籍号
      alertTitle: "",
      selNote: "", //提示信息
    };
  },
  computed: {
    verify() {
      return this.$store.state.verify;
    },
    projectInfos() {
      return this.$store.state.frontPage.projectInfos;
    },
    stuList() {
      return this.$store.state.stuList;
    },
  },
  methods: {
    //选择年级
    selectedGrade(index) {
      let current = this.grade;
      current = index;
      this.grade = current;
      if (index != "1") {
        this.isShowSchool = true;
      } else {
        this.isShowSchool = false;
        this.ruleForm.studentNo = "";
        this.ruleForm.lastSchool = "";
        this.lastSchool = "";
      }
    },
    //选择学校
    onSelectSchool(item) {
      if (item.name == "其他") {
        this.lastSchoolInput = true;
        this.ruleForm.lastSchool = "";
      } else {
        this.ruleForm.lastSchool = item.name;
        this.lastSchool = item.name;
      }
      this.dialogTableVisible = false;
    },
    onSelectIsBind(val) {
      var bindId = document.querySelector(".bindId");
      var errDoc = bindId.querySelector(".van-field__error-message");
      if (val == "0") {
        this.ruleForm.bindIdno = "";
        if (errDoc) {
          errDoc.style.display = "none";
        }
      } else {
        if (errDoc) {
          errDoc.style.display = "block";
        }
      }
    },
    //提交报名
    onSubmit() {
      let isSubmit = true;
      if (!this.isSubmit) {
        this.$toast("请勿重复提交");
        return false;
      }
      let params = this.ruleForm;
      params.gradeCode = this.grade;
      if (this.grade == 0) {
        this.$toast("请选择年级");
        return false;
      }
      if (this.isShowSchool) {
        if (params.lastSchool == "") {
          this.$toast("请选择原就读学校");
          return false;
        }
        if (params.studentNo == "") {
          this.$toast("请输入学籍号");
          return false;
        }
      }
      if (isSubmit) {
        this.$fetch("/api/Student/SubmitStudSelection", params, "post").then(
          (data) => {
            if (data.res == 0) {
              if (this.isEditInfos) {
                Toast.success({
                  message: "修改成功",
                  duration: 1500,
                });
                setTimeout(() => {
                  this.$router.push({ path: "/results" });
                }, 1500);
              } else {
                this.$router.push({ path: "/results" });
              }
            } else {
              this.$toast(data.msg);
            }
          }
        );
      }
      this.isSubmit = false;
      setTimeout(() => {
        this.isSubmit = true;
      }, 3000);
      // this.$router.push({ path: "/results" });
    },
    //获取在线报名页数据
    getRegInfo() {
      this.$fetch("/api/Student/GetStudSelection", "get").then((data) => {
        if (data.res == 0) {
          this.gradeList = data.data.itemList.gradeList;
          this.selNote = data.data.selNote;
          // this.schoolList = data.data.itemList.schoolList;
          this.grade = data.data.gradeCode || 0;
          if (data.data.gradeCode && data.data.gradeCode != "1") {
            this.isShowSchool = true;
          }

          let schoolList = data.data.itemList.schoolList;
          this.schoolList = JSON.parse(
            JSON.stringify(schoolList).replace(/schoolName/g, "name")
          );
          this.schoolList.unshift({ name: "其他" });
          if (data.data.lastSchool) {
            this.lastSchool = data.data.lastSchool;
            this.ruleForm.lastSchool = data.data.lastSchool;
          }
          this.ruleForm.studentNo = data.data.studentNo;
          this.ruleForm.isBind = data.data.isBind || "0";
          if (data.data.bindIdno) {
            this.ruleForm.bindIdno = data.data.bindIdno;
          }
        } else {
          this.$toast(data.msg);
        }
      });
    },
    getRegType(type) {
      this.$fetch("/api/Student/GetSysCode", { type: type }, "get").then(
        (data) => {
          if (data.res == 0) {
            // console.log(data);
            data.data.forEach((item) => {
              if (item.code == this.stuList.regType) {
                this.alertTitle = item.text;
              }
            });
          }
        }
      );
    },
    // 获取学生信息
    getStuList() {
      this.$fetch("/api/Student/GetStudInfo", {}, "get").then((data) => {
        if (data.res == 0) {
          this.$store.dispatch("setStuList", data.data.person);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    // 判断学生是否可修改信息、注销
    async getVerify() {
      try {
        const data = await getVerify();
        localDb.set("verify", data);
      } catch (error) {}
    },
  },
  created() {
    this.getVerify();
    //判断是不是修改页面
    if (this.$route.query.isEditInfos) {
      this.isEditInfos = true;
      this.editTitle = this.$route.query.isEditInfos;
    } else {
      this.isEditInfos = false;
    }
  },
  mounted() {
    this.getRegType("regType1");
    this.getRegInfo();
    this.getStuList();
    // if (this.verify.res != 0) {
    //   this.$toast(this.verify.msg);
    // }
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.no-edit {
  margin-top: 20px;
}
.reporting-main {
  padding: 0 10px;
  overflow: hidden;
  .bd {
    border-radius: 10px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  }
}
.notice-box {
  background-color: #fff;
  padding: 16px 20px;
  color: #ff0000;
  font-size: 28px;
  text-align: justify;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}
.selection-grade {
  padding-top: 30px;
  background: #fff;
  border-radius: 10px;

  .selection-bd {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    margin-top: 31px;
    text-align: center;
    .van-tag {
      padding: 0;
      width: 210px;
      height: 70px;
      border: 1px solid #ccc;
      border-radius: 35px;
      margin-bottom: 30px;
      margin-right: 20px;
      font-size: 30px;
      color: #222;
      background-color: #fff;
      padding-left: 60px;
      box-sizing: border-box;
      &:nth-child(3n + 3) {
        margin-right: 0;
      }
    }
    .actived {
      background-color: #e8f5ff;
      color: #0195ff;
      border-color: #acddff;
    }
  }
}
.selection-form {
  background-color: #fff;
  padding: 20px 30px 0;
  .list-bd {
    .van-form {
      .van-cell {
        padding-left: 0;
        /deep/ .van-cell__title {
          padding-left: 0;
        }
        /deep/ .van-field__error-message {
          text-align: right;
        }
        &.padrn {
          /deep/ .van-field__control {
            padding-right: 40px;
          }
        }
        /deep/ .van-field__error-message {
          padding-right: 40px;
        }
      }
      .fle1 {
        /deep/ .van-cell__title {
          flex: 1;
        }
      }
    }
    .info {
      font-size: 24px;
      color: #999;
      text-align: left;
      padding-top: 10px;
    }
  }
}
.list-hd {
  text-align: left;
  font-size: 36px;
  margin-bottom: 20px;
  h3 {
    font-weight: bold;
  }
}
.form-btn {
  width: 105%;
  margin-left: -10px;
  .van-button {
    width: 50%;
    height: 90px;
    font-size: 36px;
    border-radius: unset;
    margin-top: 30px;
    &:first-child {
      background-color: #fff;
      border: none;
      border-top: 1px solid #ccc;
      color: #222;
    }
  }
}
.form-edit-btn {
  width: 105%;
  margin-left: -10px;
  .van-button {
    margin-top: 30px;
    width: 100%;
    height: 90px;
    font-size: 36px;
  }
}
</style>
<style lang="scss">
.selection-btn {
  background: #fff;
  .van-button {
    width: 50%;
    height: 100px;
    font-size: 36px;
  }
  .van-button-block {
    width: 100%;
  }
  .van-button--default {
    border-color: #ccc;
    border-left: none;
    border-right: none;
  }
  .van-button--plain.van-button--primary {
    border-color: #ccc;
    border-left: none;
    border-right: none;
  }
}
.select-list-content {
  .van-button {
    height: 70px;
  }
}
.select-school {
  // overflow: hidden;
  .selection-table {
    .van-radio {
      .van-radio__label {
        padding-bottom: 15px;
      }
    }
  }
  .footer-btn {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    border-top: 2px #e2e2e2 solid;
    .van-button {
      width: 50%;
      border-bottom: none;
    }
    .van-button--default {
      border: none;
      border-right: 2px #e5e5e5 solid;
      color: #666;
    }
    .van-button--plain.van-button--primary {
      border: none;
    }
  }
  .van-cell-input_block {
    .van-field__control--custom {
      margin-left: -30px;
    }
  }
  .van-radio {
    padding: 30px 30px 0;
    text-align: left;
    .van-radio__label {
      width: 100%;
      border-bottom: 2px solid #e2e2e2;
      padding-bottom: 30px;
      .title {
        font-size: 34px;
        font-weight: bold;
        line-height: 50px;
        margin-bottom: 10px;
      }
      .info {
        font-size: 28px;
        color: #999;
        // line-height: 50px;
      }
    }
  }
  .van-radio__icon {
    font-size: 44px;
    margin-right: 32px;
  }
}

.form-btn .van-button {
  height: 100px;
  font-size: 36px;
}
</style>
